<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:th='http://www.thymeleaf.org'>

<body>
<span th:replace="@{banner}"></span>

<div class="container-fluid">
    <span th:replace="@{nav}"></span>

    <div class="wrapper">

        <table class="wrapper_inner table-bordered">
            <tr>
                <th>部门</th>
                <th>测站类型</th>
            </tr>
            <tr class="live_list_tr hide" th:if="${not #lists.isEmpty(departments)}"
                th:each="department,departmentStat:${departments}">
                <td th:text="${department.name}"></td>

                <td th:if="${not #lists.isEmpty(customDepartments)}">
                    <ul class="c_stationTypes">
                        <li th:if="${customDepartment.department} eq ${department.name}"
                            th:each="customDepartment,customDepartmentStat:${customDepartments}">
                            <span th:if="${cDepartment} eq ${department.name} and ${cStationType} eq ${customDepartment.stationType}"
                                  th:text="${customDepartment.stationType}" class="selected fa fa-pencil-square-o">
                            </span>
                            <span th:unless="${cDepartment} eq ${department.name} and ${cStationType} eq ${customDepartment.stationType}"
                                  th:text="${customDepartment.stationType}" class="fa fa-pencil-square-o">
                            </span>
                            <span th:if="${customDepartment.visible==1}" class="fa fa-eye"
                                  style="padding-left: 10px;" th:data="${customDepartment.id}"></span>
                            <span th:unless="${customDepartment.visible==1}" class="notvisible fa fa-eye"
                                  style="padding-left: 10px;" th:data="${customDepartment.id}"></span>
                        </li>
                    </ul>
                </td>
            </tr>
        </table>
        <span class="pager pull-right" style="margin: 0"><a class="pre">上一页</a>&nbsp;&nbsp;<span
                class="cp"></span>/<span
                class="tp"></span>
            &nbsp;&nbsp;<a
                    class="next">下一页</a></span>

        <span th:text="${cDepartment}"></span>(<span id='stationType'
                                                     th:text="${cStationType}"></span>)

        <div class="wrapper_inner c_views">
            <div class="c_stations">
                <h6>站点选择:</h6>
                <label><input type="radio" name='stationType'>全部站点</label>
                <label><input type="radio" name='stationType' checked="checked">自定义站点</label>
                <textarea multiline="true" id="c_stations" readonly="readonly"></textarea>
                <br>
                <a id="c_chooses" class="pull-left">站点选择</a>
                <select id="county" class="pull-left hidden" style="margin: -5px 0 0 40px;">
                    <option>全部</option>
                    <option>定海</option>
                    <option>岱山</option>
                    <option>普陀</option>
                    <option>嵊泗</option>
                    <option>其它</option>
                </select>
            </div>

            <div class="c_elements" th:if="${customLive!=null and not #maps.isEmpty(customLive.allElements)}">
                <h6>要素选择:</h6>
                <table class="element_list table-bordered">
                    <span id="cliveId" class="hide" th:data="${customLive.id}"></span>
                    <tr th:each="element,elementStat:${customLive.allElements}">
                        <td><label><input class="checked" th:text="${elementStat.current.key}"
                                          type="checkbox" checked></label></td>
                        <td>
                            <label th:each="value,valueStat:${elementStat.current.value}">
                                <input class="checked" th:if="${#lists.contains(customLive.elementIds,value.id)}"
                                       th:text="${value.name}"
                                       th:data="${value.id}" type="checkbox" checked>
                                <input class="uncheck"
                                       th:if="${not #lists.contains(customLive.elementIds,value.id)}"
                                       th:text="${value.name}"
                                       th:data="${value.id}" type="checkbox">
                            </label>
                        </td>
                    </tr>
                </table>
            </div>
            <a th:onclick="|save()|" class="pull-right">保存</a>
        </div>


        <div id="c_checks" class="wrapper_inner c_checks c_views hidden">
        </div>

    </div>
</div>

<script type="text/javascript" th:src="@{/zs/assets/js/myModal.js}"></script>
<script type="text/javascript" th:src="@{/zs/assets/js/json.js}"></script>

<script th:inline="javascript">

    var defineStations = /*[[${customLive.stations}]]*/;
    var cPage = /*[[${cPage}]]*/;

    var lives = $('.live_list_tr');

    //TODO
    $(function () {
        var tp = lives.length % 5 > 0 ? Math.floor(lives.length / 5) + 1 : lives.length / 5;
        if (tp == 1) {
            $('.pager').hide();
            $('.live_list_tr').removeClass('hide');
        }
        else if (cPage == undefined) {
            cPage = 1;
            for (var i = 0; i < 5; i++) {
                $(lives[i]).removeClass('hide');
            }
            $('.cp').html(cPage);
            $('.tp').html(tp);
        }
        else {
            for (var i = (cPage - 1) * 5; i < cPage * 5; i++) {
                $(lives[i]).removeClass('hide');
            }
            $('.cp').html(cPage);
            $('.tp').html(tp);
        }
    });

    $('.pre').bind('click', function () {
        if (cPage == 1) return;
        --cPage;
        $('.live_list_tr').addClass('hide');
        for (var i = (cPage - 1) * 5; i < cPage * 5; i++) {
            $(lives[i]).removeClass('hide');
        }
        $('.cp').html(cPage);
    });

    $('.next').bind('click', function () {
        if (cPage * 5 >= lives.length) return;
        $('.live_list_tr').addClass('hide');
        for (var i = cPage * 5; i < ((cPage + 1) * 5 > lives.length ? lives.length : (cPage + 1) * 5); i++) {
            $(lives[i]).removeClass('hide');
        }
        ++cPage;
        $('.cp').html(cPage);
    });


    var stationType = $('#stationType').text();

    $('.system-nav li:eq(3)').addClass('choosed');

    function save() {
        var cliveId = $('#cliveId').attr('data');
        var stations = $('#c_stations').val();
        var url;
        if (isEmpty(stations)) {
            url = "/zs/live/update/" + cliveId + '/null';
        }
        else {
            url = "/zs/live/update/" + cliveId + '/' + stations;
        }
        $.post(url, function (data, status) {
            if (status == 'success') {
                defineStations = stations;
                alert('保存成功');
            }
            else {
                alert('服务端异常，稍后再试')
            }
        })
    }

    function elementTypeCheck() {
        $(".element_list tr").each(function () {
            var $this = $(this);
            var elements = $this.find('td').eq(1).find('input');
            for (var i = 0; i < elements.length; i++) {
                if (!hasAttr(elements.eq(i), 'checked')) {
                    $this.find('td').eq(0).find('input').removeClass('checked').addClass('uncheck').attr("checked", false);
                }
            }
        });
    }

    $(function () {

        $('#c_stations').val(defineStations);

        elementTypeCheck();

        $(".c_stations input[name='stationType']").change(function () {
            var $this = $(this);
            if ($this.parent().text() == "全部站点") {
                setAllStations(stationType);
            } else {
                $('#c_stations').val(defineStations);
            }
        });

        $("#c_chooses").bind('click', function () {
            $(".c_stations input[name='stationType']:eq(1)").trigger("click");
            $('#c_checks').removeClass("hidden");
            if (stationType == '区域自动站' || stationType == '水文站') {
                $('#county').removeClass("hidden");
            }
            showSelectStations(stationType);
        });

        $('#county').change(function () {
            showSelectStationsByCounty(stationType, $(this).val());
        });


        $(".element_list tr").each(function () {
            var $this = $(this);
            var cliveId = $('#cliveId').attr('data');
            var elementType = $this.find('td').eq(0).find('input');
            var elementId = new Array();
            elementType.bind('change', function () {
                if (!$(this).is(':checked')) {
                    var temp = $this.find('td').eq(1).find('input[class=checked]');
                    for (var i = 0; i < temp.length; i++) {
                        elementId.push(temp.eq(i).attr('data'))
                    }
                    var url = '/zs/live/batchDel/' + cliveId + '/' + elementId;
                    $.post(url, function (data, status) {
                        if (status == 'success') {
                            $this.find('td').eq(0).find('input').removeClass('checked').addClass('uncheck').attr('checked', false);
                            $this.find('td').eq(1).find('input').removeClass('checked').addClass('uncheck').attr('checked', false);
                        }
                        else {
                            alert('服务端异常，稍后再试')
                        }
                    })
                }
                else {
                    var temp = $this.find('td').eq(1).find('input[class=uncheck]');
                    for (var i = 0; i < temp.length; i++) {
                        elementId.push(temp.eq(i).attr('data'))
                    }

                    var url = '/zs/live/batchAdd/' + cliveId + '/' + elementId;
                    $.post(url, function (data, status) {
                        if (status == 'success') {
                            $this.find('td').eq(0).find('input').removeClass('uncheck').addClass('checked').attr('checked', true);
                            $this.find('td').eq(1).find('input').removeClass('uncheck').addClass('checked').attr('checked', true);

                        }
                        else {
                            alert('服务端异常，稍后再试')
                        }
                    })

                }
                elementId = [];
            })
        });

        $(".element_list tr").each(function () {
            var cliveId = $('#cliveId').attr('data');
            var $this = $(this);
            $this.find('td').eq(1).find('input').bind('change', function () {
                var elementId = $(this).attr('data');
                var url;
                var $this2 = $(this);
                if (!$this2.is(':checked')) {
                    url = '/zs/live/del/' + cliveId + '/' + elementId;
                    $.post(url, function (data, status) {
                        if (status == 'success') {
                            $this2.removeClass('checked').addClass('uncheck').attr('checked', false);
                        }
                        else {
                            alert('服务端异常，稍后再试')
                        }
                    })

                }
                else {
                    url = '/zs/live/add/' + cliveId + '/' + elementId;
                    $.post(url, function (data, status) {
                        if (status == 'success') {
                            $this2.removeClass('uncheck').addClass('checked').attr('checked', true);
                        }
                        else {
                            alert('服务端异常，稍后再试')
                        }
                    })

                }
            })
        })

    });

    $('.fa-pencil-square-o').bind('click', function () {
        var $this = $(this);
        stationType = $this.text();
        var department = $this.parents('tr').find('td').eq(0).text();
        var url = '/zs/live/get/' + department + '/' + stationType + '/' + cPage;
        window.location.href = url;
    })

    $('.fa-eye').bind('click', function () {
        var $this = $(this);
        var liveId = $this.attr('data');
        var v = $this.hasClass('notvisible');//如果是不可见
        var url;
        if (v) {
            url = '/zs/live/visible/' + liveId + '/' + 1;
            $.get(url, function (data, status) {
                if (status == "success") {
                    $this.removeClass('notvisible');
                }
            });

        } else {
            url = '/zs/live/visible/' + liveId + '/' + 0;
            $.get(url, function (data, status) {
                if (status == "success") {
                    $this.addClass('notvisible');
                }
            });
        }
    })

</script>

</body>
</html>